<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中医药管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="/styles/common.css" />
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <style>
        /*html{-ms-overflow-x: hidden;}*/
        .body{
            min-width: 1366px;
        }
        .app-main{
            height: 50%;
            /*     height: calc(100% + 0px);*/
            /*    height: calc(100% + 17px);*/
        }
        .app-main .divTmp{
            width: 100%;
            height: 100%;

        }
    </style>
</head>

<body>
<div class="app" id="app">
    <table class="maintablehead" cellspacing=0 cellpadding=0 style="width: 100%">
        <tr>
            <td style="background-color:#0f3312;" class="titleheadtd">
                <div class="systitlediv"><img src="/images/zyydx.png" alt="" style="width:262px; height:100px; vertical-align:middle;"> &nbsp; 方剂医案数据平台</div>

                <div class="userheaddiv" > <img src="/images/userhead.png" alt="" class="userheadimg">  团队:&nbsp;<span th:text="${teamname}"></span></div>
                <div class="userheaddiv" ><img src="/images/userhead.png" alt="" class="userheadimg"> <a  onclick="update()" style="color:#f0faf0;" th:text="${userid}"></a> &nbsp;<a href="/logout" style="color:#f0faf0;">(退出)</a></div>
                <span id="Id" th:text="${userid}" class="shownone">Id</span>


            </td>
        </tr>
    </table>
    <p class="shownone" th:text="${userType}" id="userType"></p>
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">

            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"

                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#c5d5d6"
                        text-color="#1d2222"
                        active-text-color="#262a2a"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub,false)"
                            >
                                <!--                                <i :class="iconfont" :class="sub.icon"></i>-->
                                <span slot="title">{{sub.name}}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">

            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading" ></div>
                <iframe

                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
    <div class="footerdiv" >
        &copy;2016 &nbsp; 湖北中医药大学经方应用研究所&nbsp;&nbsp;&nbsp;&nbsp;技术支持：武汉科技大学<br />地址：湖北省武汉市洪山区黄家湖西路1号　邮编：430065　E-mail：hbzyjd@qq.com <br />
        鄂ICP备15017355号-3
        <br />
        <div class="footershengming">
            本平台仅做学习交流使用，病案所有权属于名医本人或其工作室负责人。<br />他人如需运用相关资料，发表文章著作，需征得名医本人或相关负责人的同意。<br />
            本站力求数据准确，但不保证数据全部无误。一切数据使用后果自行负责。
        </div>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/plugins/axios/axios.min.js"></script>
<script src="/js/request.js"></script>
<script src="./api/login.js"></script>
<script>

    function update(){
        var id=document.getElementById('Id').textContent;
        window.location.href = "/updatepassword/" + id;
    }
    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '20',
                menuActived: '20',
                userInfo: {},
                menuList: [
                    {
                        id: '20',
                        name: '节气库',
                        url:'/jq',
                    },
                    {
                        id: '1',
                        name: '用户管理',
                        url:'/user',
                    },
                    {
                        id: '2',
                        name: '角色管理',

                        url:'/systemrole',
                        // icon: 'icon-category'
                    },
                    {
                        id: '3',
                        name: '功能管理',
                        url:'/systemfunction',
                    },
                    {
                        id: '21',
                        name: '角色功能',
                        url:'/roleFun',
                    },

                    {
                        id: '4',
                        name: '团队管理',
                        url: '/team',
                        // icon: 'icon-food'
                    },
                    {
                        id: '5',
                        name: '西医疾病库ICD',
                        url: '/xyjb',
                        // icon: 'icon-combo'
                    },
                    {
                        id: '6',
                        name: '中医疾病库TCD',
                        url: '/zyjb',
                        // icon: 'icon-order'
                    },
                    {
                        id: '7',
                        name: '地理信息库',
                        url:'/dlxx',
                    },
                    {
                        id: '8',
                        name: '中医证候库',
                        url:'/zyzz',
                    },
                    {
                        id: '9',
                        name: '中药管理',
                        url:'/zyxx',
                    },
                    {
                        id: '10',
                        name: '书籍管理',
                        url:'/book',
                    },
                    {
                        id: '11',
                        name: '方剂管理',
                        url:'/fjgl',
                    },
                    {
                        id: '12',
                        name: '名医信息库',
                        url:'/myxx',
                    },
                    {
                        id: '13',
                        name: '门诊医案库',
                        url:'/mzhen',
                    },
                    {
                        id: '14',
                        name: '期刊文献库',
                        url:'/qikan',
                    },
                    {
                        id: '15',
                        name: '网络文献库',
                        url:'/wluo',
                    },
                    {
                        id: '16',
                        name: '文献医案库',
                        url:'/wxya',
                    },
                    {
                        id: '17',
                        name: '古籍文献库',
                        url:'/guji',
                    },
                    {
                        id: '18',
                        name: '学生录入查询',
                        url:'/xslr',
                    },
                    {
                        id: '19',
                        name: '工作量统计',
                        url:'/workload',
                    },

                    //   ],
                    // },
                ],
                // iframeUrl: '/pages/testlogin.html',
                iframeUrl: '/jq',
                headTitle: '',
                goBackFlag: false,
                loading: true,
                timer: null
            }
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },
        mounted() {
            window.menuHandle = this.menuHandle
        },
        methods: {
            logout() {
                logoutApi().then((res)=>{
                    if(res.code === 1){
                        localStorage.removeItem('userInfo')
                        window.location.href = '/backend/page/login/login.html'
                        //     需修改
                    }
                })
            },
            goBack() {
                // window.location.href = 'javascript:history.go(-1)'
                const menu = this.menuList.find(item=>item.id===this.menuActived)
                // this.goBackFlag = false
                // this.headTitle = menu.name
                this.menuHandle(menu,false)
            },
            menuHandle(item, goBackFlag) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                this.headTitle = item.name
                this.goBackFlag = goBackFlag
                this.closeLoading()
            },
            closeLoading(){
                this.timer = null
                this.timer = setTimeout(()=>{
                    this.loading = false
                },1000)
            }
        }
    })
</script>

<!--下面是权限管理相关代码-->
<script>
    // 获取包含菜单的父容器
    const sidebarContainer = document.querySelector('.sidebar-container');
    const userRole = document.getElementById('userType').innerText;  //该用户的类型，即角色
    // 获取所有生成的 li 标签
    const liElements = sidebarContainer.querySelectorAll('li');
    // 遍历 li 标签并根据内容判断设置样式
    liElements.forEach(li => {
        const textContent = li.textContent.trim();

        // 在这里根据内容以及角色判断是否需要设置样式
        if (textContent == '用户管理'&&userRole.indexOf('用户管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '角色管理'&&userRole.indexOf('角色管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '功能管理'&&userRole.indexOf('功能管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '角色功能'&&userRole.indexOf('角色管理')==-1) {
            li.style.display = 'none';
        }if (textContent == '团队管理'&&userRole.indexOf('团队管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '西医疾病库ICD'&&userRole.indexOf('西医疾病库ICD')==-1) {
            li.style.display = 'none';
        } if (textContent == '中医疾病库TCD'&&userRole.indexOf('中医疾病库TCD')==-1) {
            li.style.display = 'none';
        }if (textContent == '地理信息库'&&userRole.indexOf('地理信息库')==-1) {
            li.style.display = 'none';
        } if (textContent == '中药管理'&&userRole.indexOf('中药管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '中医证候库'&&userRole.indexOf('中医证候库')==-1) {
            li.style.display = 'none';
        } if (textContent == '书籍管理'&&userRole.indexOf('书籍管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '方剂管理'&&userRole.indexOf('方剂管理')==-1) {
            li.style.display = 'none';
        } if (textContent == '名医信息库'&&userRole.indexOf('名医信息库')==-1) {
            li.style.display = 'none';
        } if (textContent == '门诊医案库'&&userRole.indexOf('门诊医案库')==-1) {
            li.style.display = 'none';
        } if (textContent == '期刊文献库'&&userRole.indexOf('期刊文献库')==-1) {
            li.style.display = 'none';
        } if (textContent == '网络文献库'&&userRole.indexOf('期刊文献库')==-1) {
            li.style.display = 'none';
        } if (textContent == '文献医案库'&&userRole.indexOf('文献医案库')==-1) {
            li.style.display = 'none';
        } if (textContent == '古籍文献库'&&userRole.indexOf('古籍文献库')==-1) {
            li.style.display = 'none';
        } if (textContent == '学生录入查询'&&userRole.indexOf('学生录入查询')==-1) {
            li.style.display = 'none';
        } if (textContent == '工作量统计'&&userRole.indexOf('工作量统计')==-1) {
            li.style.display = 'none';
        }
        // 可以根据其他条件继续判断和设置样式
    });

</script>
</body>

</html>

